<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div>
          <h1>{{ articleDetail.articleTitle }}</h1>
        </div>
        <div style="margin-top: 5px">
          {{ articleDetail.articleDate }} 浏览量{{ articleDetail.articleWatchCount }} 喜欢{{ articleDetail.articleThuCount }} 评论{{ articleDetail.articleCommentsCount }}
        </div>
        <div style="margin-top: 5px">
          <el-avatar shape="square" :size="50" :src="circleUrl"></el-avatar>
          {{ articleDetail.articleAuthor }}
        </div>

        <div style="margin-top: 5px" v-html="articleDetail.articleContent">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getArticle, updateArticle } from '@/api/article'
import { getInfoById } from '@/api/login'

export default {
  data () {
    return {
      articleId: null,
      circleUrl: '',
      articleDetail: {},
      articleAuthorid: null
    }
  },
  async created () {
    // 获取文章
    this.articleId = this.$route.params.id
    const res1 = await getArticle(this.articleId)
    res1.data.data.articleWatchCount += 1
    this.articleDetail = res1.data.data
    await updateArticle(res1.data.data)

    // 获取作者信息
    this.articleAuthorid = res1.data.data.articleAuthorid
    const res2 = await getInfoById(this.articleAuthorid)
    this.circleUrl = res2.data.data.avatar

    // // 获取视频评论
    // this.queryParams.videoId = this.videoId
    // const res2 = await listComments(this.queryParams)
    // this.commentsFromServer = res2.data.rows

    // // 给视频评论添加用户名字
    // this.commentsFromServer.forEach(comment => {
    //   this.getUserName(comment.userId).then(userName =>
    //     this.comments.push({ ...comment, userName: userName })
    //   )
    // })
  }
}

</script>

<style scoped lang="less">

</style>
